<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>菜品展示</title>
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Arial', sans-serif;
    }

    body {
      background-color: #f4f4f4;
      color: #333;
      line-height: 1.6;
    }

    header {
      background-color: #f2c57f;
      padding: 20px 0;
      text-align: center;
    }

    header .logo h1 {
      font-size: 36px;
      color: #fff;
      font-weight: bold;
    }

    main {
      padding: 20px;
    }

    .menu {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }

    .dish-card {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      width: 280px;
      overflow: hidden;
      text-align: center;
      transition: transform 0.3s ease-in-out;
    }

    .dish-card:hover {
      transform: translateY(-10px);
    }

    .dish-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .dish-info {
      padding: 15px;
    }

    .dish-info h2 {
      font-size: 24px;
      color: #333;
      margin-bottom: 10px;
    }

    .dish-info .price {
      font-size: 20px;
      color: #e74c3c;
      font-weight: bold;
    }

    .order-btn {
      background-color: #27ae60;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 6px;
      margin-top: 10px;
      cursor: pointer;
      font-size: 16px;
    }

    .order-btn:disabled {
      background-color: gray;
      cursor: not-allowed;
    }

    .dish-info select {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      font-size: 16px;
    }

    footer {
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 10px;
      margin-top: 40px;
    }
  </style>
</head>
<body>
<header>
  <div class="logo">
    <h1>美味餐点</h1>
  </div>
</header>

<main id="app">
  <section class="menu">
    <div class="dish-card" v-if="dish.dishId">
      <img :src="dish.dishImg">
      <div class="dish-info">
        <h2>{{ dish.dishName }}</h2>
        <p class="price">¥ {{ dish.dishPrice }}</p>
        <select v-model="selectedCouponId" style="text-align:center;">
          <option :value="null">不使用优惠券</option>
          <option v-for="coupon in myCouponList" :value="coupon.mycouponId" :key="coupon.mycouponId">
            {{ coupon.other1 }} - ¥{{ coupon.other2 }}
          </option>
        </select>

        <button class="order-btn" @click="addOrder" :disabled="isSubmitting">
          {{ '立即下单' }}
        </button>
      </div>
    </div>
  </section>
</main>

<footer>
  <p>&copy;2010-2022汉堡王公司  |  2010-2022 Burger King Corporation.All rights reserved</p>
</footer>


<script>
  const vm = new Vue({
    el: "#app",
    data: {
      dish: {
        dishId: "",
        dishName: "",
        dishImg: "",
        dishPrice: ""
      },
      myorder:{
        dishId:"",
        dishName:"",
        dishPrice:"",
        dishImg:""
      },
      myCouponList:[],  // 我的优惠券列表
      selectedCoupon: {  // 选中的优惠券对象
        mycouponId:"",
        other1:"",
        other2:""
      },
      newOrder:{
        orderId:"",
        dishId:"",
        dishName:"",
        dishImg:"",
        dishPrice:"",
        orderPrice:"",
        couponName:"",
        mycouponId:"",
      },


      isSubmitting: false
    },
    mounted() {
      this.getById(),
              this.getAllMyCoupons();
    },
    methods: {
      getById() {
        const urlParams = new URLSearchParams(window.location.search);
        const id = urlParams.get("id");
        console.log("id = " + id);
        axios.get("dish/" + id).then(response => {
          if (response.data.code === 200) {
            this.dish = response.data.data;
          } else {
            alert("菜品信息加载失败");
          }
        }).catch(error => {
          console.error(error);
          alert("请求出错");
        });
      },
      getAllMyCoupons() {
        axios.get("mycoupon/status/0")
                .then(response=>{
                  this.myCouponList=response.data.data;
                  console.log(response.data.data)
                }).catch(error=>{
                  console.log(error)
        })
      },
      selectedCouponId(){

      },



      addOrder() {
        if (this.isSubmitting) return;

        this.isSubmitting = true;
        // 找到选中的优惠券对象
        const selectedCoupon = this.myCouponList.find(coupon => coupon.mycouponId === this.selectedCouponId);

        // 优惠金额，默认0（没有选优惠券时）
        const discount = selectedCoupon ? Number(selectedCoupon.other2) : 0;

        // 计算订单价格 = 菜品价格 - 优惠金额，确保不小于0
        const finalPrice = Math.max(0, Number(this.dish.dishPrice) - discount);

        const order = {
          custId: 1,
          dishId: this.dish.dishId,
          dishName: this.dish.dishName,
          dishImg: this.dish.dishImg,
          dishPrice: this.dish.dishPrice,
          couponId: selectedCoupon.other1,
          couponPrice:selectedCoupon.other2,
          orderPrice: finalPrice,

          orderNumber: "",

          status: "0"
        };

        axios.post("/kfc/myorder", order)
                .then(response => {
                  if (response.data.code === 200) {
                    alert("下单成功！");
                    // 跳转到用户ID=1的订单列表页
                    window.location.href="order_detail.html?id=" + response.data.data.orderId
                  } else {
                    alert("下单失败：" + response.data.msg);
                  }
                })
                .catch(error => {
                  console.error("请求失败", error);
                  alert("请求失败");
                })
                .finally(() => {
                  this.isSubmitting = false;
                });
      }

    }
  });
</script>
</body>
</html>
